<div class="layui-fluid">
      <div class="layui-row">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">商品标题</label>
          <div class="layui-input-inline">
            <input type="text" name="title" required  lay-verify="required" placeholder="商品标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">商品副标题</label>
          <div class="layui-input-inline">
            <input type="text" name="intro" required  lay-verify="required" placeholder="商品副标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">分类</label>
          <div class="layui-input-inline">
            <select name="cate_id_1" lay-verify="required" lay-filter='cate_1'>
              <option value="">请选择一级分类</option>
              {volist name="cates" id='item'}
              <option value="{$item.cate_id}">{$item.cate_name}</option>
              {/volist}
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="cate_id_2" lay-verify="required" lay-filter='cate_2' id="cate_id_2">
              <option value="">请选择二级分类</option>

            </select>
          </div>
          <div class="layui-input-inline">
            <select name="cate_id_3" lay-verify="required" id="cate_id_3">
              <option value="">请选择三级分类</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">品牌</label>
          <div class="layui-input-inline">
            <select name="brand_id" lay-verify="required">
              <option value=""></option>
              {volist name="brand" id='item'}
              <option value="{$item.brand_id}">{$item.brand_name}</option>
              {/volist}
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">商品价格</label>
          <div class="layui-input-inline">
            <input type="text" name="shop_price" required  lay-verify="number" placeholder="商品价格" value="0" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">市场价格</label>
          <div class="layui-input-inline">
            <input type="text" name="market_price" value="0" required  lay-verify="number" placeholder="市场价格" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">赠送积分</label>
          <div class="layui-input-inline">
            <input type="text" name="score" value="0" required  lay-verify="number" placeholder="赠送积分" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">商品主图</label>
          <div class="layui-input-block">
            <div class="layui-upload">
              <button type="button" class="layui-btn" id="shop_image">上传图片</button>
              <div class="layui-upload-list">
                <img width="80" class="layui-upload-img" id="demo1">
                <p id="demoText"></p>
              </div>
              <input type="hidden" name="shop_image" id="shop_image_input">
            </div> 
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">商品缩略图</label>
          <div class="layui-input-block">
            <div class="layui-upload">
              <button type="button" class="layui-btn" id="shop_image_list">多图片上传</button> 
              <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="demo2"></div>
             </blockquote>
             <div id="shop_image_list_input">
               
             </div>
            </div>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">商品属性</label>
          <div class="layui-input-block">
              <button type="button" class="layui-btn" id="attr_add">增加</button> 
          </div>
        </div>
        <div id="shop_attr">
          
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">商品详情</label>
          <div class="layui-input-block">
            <textarea name="content" placeholder="请输入内容" class="layui-textarea" id="content"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="add">发布</button>
          </div>
        </div>
      </form>
    </div>
  </div>
 <style>
   body{
    background: #fff;
   }
 </style>
 <script id="shop_attr_item" type="text/html">
   <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-inline" style="width: 800px;">
        <input type="text" name="attr_title[]" required  lay-verify="required" placeholder="属性名" autocomplete="off" class="layui-input" style="width: 30%;display: inline-block;">
        <input type="text" name="attr_values[]" required  lay-verify="required" placeholder="属性值" autocomplete="off" class="layui-input" style="width: 30%;display: inline-block;">
        <a onclick="del_attr(this)" class="layui-btn layui-btn-small layui-btn-danger">删除</a>
      </div>
    </div>
 </script>
<script>
//Demo
layui.use(['form','layedit','upload'], function(){
  var form = layui.form;
  var upload = layui.upload;
  var layedit = layui.layedit;

  $('#attr_add').click(function(event) {
      $('#shop_attr').append($('#shop_attr_item').html());
  });


  form.on('select(cate_1)', function(data){

    $.post('{:url('admin/goods/get_cate')}', {cate_id: data.value}, function(data, textStatus, xhr) {
        if(data.code){

          $('#cate_id_2').html('<option value="">请选择二级分类</option>');

          for(var i in data.data){
             $('#cate_id_2').append('<option value="'+data.data[i].cate_id+'">'+data.data[i].cate_name+'</option>')
          }

          form.render('select');
        }
    });
  }); 


  form.on('select(cate_2)', function(data){

    $.post('{:url('admin/goods/get_cate')}', {cate_id: data.value}, function(data, textStatus, xhr) {
        if(data.code){

          $('#cate_id_3').html('<option value="">请选择三级分类</option>');

          for(var i in data.data){
             $('#cate_id_3').append('<option value="'+data.data[i].cate_id+'">'+data.data[i].cate_name+'</option>')
          }

          form.render('select');
        }
    });
  });


  //普通图片上传
  var uploadInst = upload.render({
    elem: '#shop_image'
    ,url: '{:url("index/jie/upload")}'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){

        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }else{
        $('#shop_image_input').val(res.data.src);
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });


  //多图片上传
  upload.render({
    elem: '#shop_image_list'
    ,url: '{:url("index/jie/upload")}'
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img width="80" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
      });
    }
    ,done: function(res){
       if(res.code > 0){
        return layer.msg('上传失败');
      }else{
        $('#shop_image_list_input').append('<input type="hidden" name="shop_image_list[]" value="'+res.data.src+'">');
      }
    }
  });

    layedit.set({
      uploadImage: {
        url: '{:url('index/jie/upload')}' 
        ,type: '' //默认post
      }
    });

    index = layedit.build('content'); //建立编辑器
  
  //监听提交
  form.on('submit(add)', function(data){

    data.field.content = layedit.getContent(index);

    $.post('{:url('admin/goods/save')}', data.field, function(data, textStatus, xhr) {
      if(data.code){
        layer.alert(data.msg, {icon: 6},function(){
          xadmin.close();
          parent.location.reload();
        });
      }else{
        layer.msg(data.msg, function(){});
      }
      /*optional stuff to do after success */
    });
    // console.log(data.field)
    // layer.msg(JSON.stringify(data.fsield));
    return false;
  });
});

function del_attr(obj) {
  $(obj).parents('.layui-form-item').remove();
}
</script>
      